<template>
    <Card style="height:800px">
        <Row>
          <Date-picker type="datetime" v-model="startTime" format="yyyy-MM-dd " placeholder="面签开始日期" style="width: 150px"></Date-picker>
          <span style="width: 200px;margin-left: 10px;">-</span>
          <Date-picker type="datetime" v-model="createDate" format="yyyy-MM-dd" placeholder="面签创建日期" style="width: 150px;margin-left: 10px;"></Date-picker>
          <Input v-model="custName" placeholder="客户姓名" style="width: 150px;margin-left: 20px;" />
          <Input v-model="clientManager" placeholder="客户经理" style="width: 150px;margin-left: 20px;" />
          <Input v-model="custIdcard" placeholder="客户身份证号码" style="width: 150px;margin-left: 20px;" />

          <i-select :model.sync="model1" v-model="faceSigStatus" size="large" placeholder="面签状态" style="width: 150px;margin-left: 20px;">
            <i-option v-for="item in faceSigStatusList"  :value="item.value" :key="item.value">{{ item.label }}</i-option>
          </i-select>

          <i-select :model.sync="model2" size="large" v-model="processStatus" placeholder="流程状态" style="width: 150px;margin-left: 20px;">
            <i-option v-for="item in nodeList" :value="item.value" :key="item.value">{{ item.label }}</i-option>
          </i-select>

          <i-select :model.sync="model3" size="large" v-model="channelType" placeholder="渠道" style="width: 150px;margin-left: 20px;">
            <i-option v-for="item in channelTypeList" :value="item.value" :key="item.value">{{ item.label }}</i-option>
          </i-select>

        </Row>
        <Row style="margin-top: 10px;">
          <i-select :model.sync="model4" size="large" v-model="faceJobId" placeholder="面签员" style="width: 150px;">
            <i-option v-for="item in faceJobIdList" :value="item.value"  :key="item.value">{{ item.label }}</i-option>
          </i-select>
          <i-button type="primary"  @click="searchPage()"  icon="ios-search" style="margin-left: 20px;">搜索</i-button>
          <i-button type="warning"  @click="cleanCondition" style="margin-left: 20px;">重置</i-button>
        </Row>
        <Row class="margin-top-10 searchable-table-con1">
            <Table :columns="columns1" :data="dataPage" style="margin-top: 10px;"></Table>
            <div style="margin: 10px;overflow: hidden">
                <div style="text-align: center;margin-top: 36px;">
                    <Page :total="dataTotal" :current="pageNo" :page-size="pageSize" @on-change="handlePageChange" show-elevator  show-total></Page>
                </div>
            </div>
        </Row>
    </Card>
</template>

<script>

export default {
  data () {
    return {
      baseUrl: this.$appContext.marvels_core_approve,
      $ajax: null,
      columns1: [
        {
          title: '序号',
          type: 'index',
          width: 80,
          align: 'center'
        },
        {
          align: 'center',
          title: '客户姓名',
          key: 'custName'
        },
        {
          align: 'center',
          title: '贷款ID',
          key: 'loanId'
        },
        {
          align: 'center',
          title: '身份证号码',
          key: 'custIdcard',
          width: 160
        },
        {
          align: 'center',
          title: '客户经理',
          key: 'clientManager'
        },
        {
          align: 'center',
          title: '渠道',
          key: 'channelType',
          render: (h, params) => {
            const vm = this
            return h('div', {
              domProps: {
                innerHTML: vm.renderColumnContext(params)
              }
            }, params.content)
          }
        },
        {
          align: 'center',
          title: '审批核定金额',
          key: 'principalAmtAct'
        },
        {
          align: 'center',
          title: '面签开始日期',
          key: 'startTime',
          width: 160,
          // sortable:'custom',
          // sortType:'desc',
          render: (h, params) => {
            var vm = this
            return h('div', [
              h('span', vm.$util.formatTime(params.row.appointmentDate ? params.row.appointmentDate : null))
            ])
          }
        },
        {
          align: 'center',
          title: '面签创建日期',
          key: 'createDate',
          width: 160,
          // sortable:'custom',
          // sortType:'desc',
          render: (h, params) => {
            var vm = this
            return h('div', [
              h('span', vm.$util.formatTime(params.row.createDate ? params.row.createDate : null))
            ])
          }
        },
        {
          align: 'center',
          title: '面签结果',
          key: 'faceSigStatus',
          render: (h, params) => {
            const vm = this
            return h('div', {
              domProps: {
                innerHTML: vm.renderColumnContext(params)
              }
            }, params.content)
          }
        },
        {
          align: 'center',
          title: '否决原因',
          key: 'remark'
        },
        {
          align: 'center',
          title: '是否取消',
          key: 'cancel',
          render: (h, params) => {
            const vm = this
            return h('div', {
              domProps: {
                innerHTML: vm.renderColumnContext(params)
              }
            }, params.content)
          }
        },
        {
          align: 'center',
          title: '面签员',
          key: 'faceJobId'
        },
        {
          align: 'center',
          title: '操作',
          render: (h, param) => {
            const vm = this
            if (param.row.faceSigStatus === 0 && param.row.cancel !== 0) {
              return h('div', {}, [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    fontSize: '12px'
                  },
                  on: {
                    click: () => {
                      vm.$router.push({
                        name: 'videofacesigwork-editor',
                        path: '/customer-service/spmq/videofacesigwork-editor',
                        query: {
                          id: param.row.id
                        }
                      })
                    }
                  }
                }, '编辑')
              ])
            }
          }
        }
      ],
      startTime: new Date(),
      createDate: null,
      custName: '',
      custIdcard: '',
      clientManager: '',
      faceJobId: '',
      channelType: '',
      faceSigStatus: '',
      processStatus: '',
      dataPage: [],
      dataTotal: 0,
      pageTotal: 1,
      pageNo: 1,
      pageSize: 10,
      toggleAddMenus: false,
      menuTree: [], // 整个菜单树
      selectList: [], // 页面双向绑定渲染，当前角色选中的菜单
      choosedRow: null,
      // 渠道下拉
      channelTypeList: [
        {
          value: '',
          label: '请选择'
        }
      ],
      model3: '',
      faceJobIdList: [
        {
          value: '',
          label: ''
        }
      ],
      model4: '',
      faceSigStatusList: [
        // 0.面谈中、1.面签中、2.面谈退回、3.已取消、4.已过号)
        {
          value: '',
          label: '请选择'
        },
        {
          value: '0',
          label: '面谈中'
        },
        {
          value: '1',
          label: '正在面签'
        },
        {
          value: '2',
          label: '已面签'
        },
        {
          value: '3',
          label: '已过号'
        },
        {
          value: '4',
          label: '面谈通过'
        },
        {
          value: '5',
          label: '面谈退回'
        },
        {
          value: '6',
          label: '面谈否决'
        },
        {
          value: '7',
          label: '待面签'
        },
        {
          value: '8',
          label: '面签退回'
        },
        {
          value: '9',
          label: '面谈通过'
        }
      ],
      model1: '',
      nodeList: [
        // processStatus 流程状态 : 0.面谈退回、1.面谈通过、2.面谈拒绝、3.面签通过、4.面签拒绝
        {
          value: '',
          label: '请选择'
        }
      ],
      model2: '',
      faceJobIdlist: [
        {
          value: '',
          label: '请选择'
        }
      ]
    }
  },
  methods: {

    // 表格单元格渲染布尔值
    renderColumnContext: function (rowContext) {
      // 面签状态：面谈中、面签中、面谈退回、已取消、已过号；
      // 流程状态：面谈退回、面谈通过、面谈拒绝、面签通过、面签否决；
      if (rowContext.column.key === 'faceSigStatus') {
        var status = rowContext.row.faceSigStatus
        if (status === '0') {
          return '未面签'
        } else if (status === '1') {
          return '正在面签'
        } else if (status === '2') {
          return '已面签'
        } else if (status === '3') {
          return '已过号'
        } else if (status === '4') {
          return '面谈通过'
        } else if (status === '5') {
          return '面谈退回'
        } else if (status === '6') {
          return '面谈否决'
        } else if (status === '7') {
          return '待面签'
        } else if (status === '8') {
          return '面签退回'
        } else if (status === '9') {
          return '面签拒绝'
        }
      } else if (rowContext.column.key === 'cancel') {
        return rowContext.row.cancel === 1 ? '未取消' : '取消'
      } else if (rowContext.column.key === 'channelType') {
        return rowContext.row.channelType === 101 ? '保险渠道' : '银行渠道'
      } else if (rowContext.row.custName === 'custName') {
        // return '<span style="color:#57a3f3"><a>123213</a></span>';
      }
    },
    // 分页查询
    searchPage (initParam) {
      if (!initParam) {
        this.startTime = this.startTime
      } else {
        var da = new Date()
        this.startTime = da
      }
      var params = {
        'pageNo': this.pageNo,
        'pageSize': this.pageSize,
        'startTime': this.startTime,
        'createDate': this.createDate,
        'custName': this.custName,
        'custIdcard': this.custIdcard,
        'clientManager': this.clientManager,
        'faceJobId': this.faceJobId,
        'channelType': this.channelType,
        'faceSigStatus': this.faceSigStatus,
        'processStatus': this.processStatus
      }
      var url = this.baseUrl + 'approve/spmq/service/faceSigPageList/' + params.pageNo + '/' + params.pageSize
      this.$ajax.post(url, params).then(re => {
        var data = re.data
        var code = data.code
        var message = data.message
        if (code !== 'success') {
          this.$Message.warning(message)
          return
        }
        this.dataPage = data.data.list
        this.dataTotal = data.data.total
        this.pageTotal = data.data.pages
        this.pageNo = data.data.pageNum
      }).catch(er => {
      })
    },
    // 翻页
    handlePageChange (index) {
      this.pageNo = index
      this.searchPage()
    },
    // 清空查询条件
    cleanCondition () {
      this.startTime = new Date()
      this.createDate = null
      this.custName = null
      this.custIdcard = null
      this.clientManager = null
      this.faceJobId = null
      this.faceSigStatus = null
      this.processStatus = null
      this.channelType = null
    },
    faceScreenCondition () {
      this.$ajax.get(this.baseUrl + 'approve/mqcspz/service/faceScreenCondition').then(re => {
        var data = re.data
        var code = data.code
        var message = data.message
        if (code !== 'success') {
          this.$Message.warning(message)
          return
        }
        if (data.data.channelList) {
          // 渠道下拉框
          var channelTypeList = data.data.channelList
          for (var i = 0; i < channelTypeList.length; i++) {
            this.channelTypeList.push({
              value: channelTypeList[i].channelCode,
              label: channelTypeList[i].channelName
            })
          }
        }
        if (data.data.caseNodes) {
          // 流程下拉框
          var nodeList = data.data.caseNodes
          for (var k = 0; k < nodeList.length; k++) {
            this.nodeList.push({
              value: nodeList[k].node_code,
              label: nodeList[k].node_name
            })
          }
        }
        if (data.data.userList) {
          // 面签员下拉框
          var faceJobIdlist = data.data.userList
          for (var j = 0; j < faceJobIdlist.length; j++) {
            this.faceJobIdList.push({
              value: faceJobIdlist[j].userCode,
              label: faceJobIdlist[j].userNamep
            })
          }
        }
      }).catch(er => {
      })
    }
  },
  mounted () {
    this.$ajax = this.$util.ajax()
    this.searchPage()
    //  this.searchChannel();
    //  this.getCaseNode();
    this.faceScreenCondition()
  },
  created: function () {

  },
  components: {

  }
}
</script>
